<template>
 <el-main>
  <div class="menmuTitle">
   <h1>{{ $t('user.assets.title') }} <i class="el-icon-view"></i></h1>

   <div class="goLink pointer hoverTr3" @click="details">
    {{ $t('user.assets.go') }}

    <i class="el-icon-right"></i>
   </div>
  </div>

  <div class="box" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
   <div class="itemBox" v-if="!loading">
    <h1><span>{{ amount }}</span>.{{ decimal }}</h1>
    <p> {{ $t('user.assets.total') }} / USDT</p>
   </div>

   <div class="table" v-if="!loading">
    <el-table :data="tableData" height="350">
     <el-table-column prop="date" :label="$t('user.assets.t1')" align="left">
      <template slot-scope="scope">
       <div class="icon">
        <img :src="scope.row.icon" alt="">
        {{ scope.row.coinCode }}
       </div>
      </template>
     </el-table-column>
     <el-table-column prop="avalibleBalance" :label="$t('user.assets.t2')" align="left"></el-table-column>
     <el-table-column prop="lockedPrice" :label="$t('user.assets.t3')" align="left"></el-table-column>
     <el-table-column prop="usdtBalance" :label="$t('user.assets.t4')" align="left"></el-table-column>
    </el-table>

    <pagination :total="total" :pageSize="ruleForm.pageSize" @pageTotal="pageTotal" :count="7" @pageNum="pageNum" :margin="marginTop"></pagination>
   </div>
  </div>
 </el-main>
</template>

<script>
import Pagination from "../../../components/Pagination/Pagination";  // 分页

const btc = require('@/assets/BTC.jpg')
const eth = require('@/assets/ETH.jpg')
const usdt = require('@/assets/USDT.jpg')

export default {
 name: "Assets",
 data: () => ({
  tableData: [],
  loading: true,
  i: 0,
  amount: 0,
  decimal: null,

  marginTop: 40,

  icon: {
   BTC: btc,
   ETH: eth,
   USDT: usdt
  },

  total: 20,
  ruleForm: {
   pageSize: 20,
   pageNum: 1
  }
 }),
 components: {
  Pagination
 },
 created() {
  this.table();

  this.balance();
 },
 methods: {

  // 资产列表
  table () {
   this.i++;
   this.$post(this.$address.info, {
    data: ''
   })
    .then(res => {
     this.i--;
     if (res.code === 1) {
      res.data.forEach(item => {
       item.lockedPrice = item.lockedPrice === null ? 0 : item.lockedPrice
       item.icon = item.icon === null ? this.icon[item.coinCode] : item.icon
      })
      this.tableData = res.data
     }
    })
  },

  // 切换页面条数
  pageTotal(e) {
   this.ruleForm.pageSize = e;
   this.ruleForm.pageNum = 1;
   this.table()
  },
  // 跳转
  pageNum(e) {
   this.ruleForm.pageNum = e;
   this.table()
  },

  // 资产明细
  details () {
   this.$router.push({
    path: '/userAssetsList'
   })
  },

  // 余额
  balance () {
   this.i++;
   this.$post(this.$address.balance)
    .then(res => {
     this.i--;
     if (res.code === 1) {
      this.amount = res.data.toString().split('.')[0];
      this.decimal = res.data.toString().split('.')[1] ? res.data.toString().split('.')[1].toFixed(4) : '0000'
     }
    })
  }
 },
 watch: {
  i(a,b) {
   if (a === 0) {
    this.loading = false
   }
  }
 }
}
</script>

<style scoped lang="scss">
.el-main {
 .menmuTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  h1 {
   font-size: 20px;
   font-weight: bold;
   color: #002445;
   position: relative;
   padding-bottom: 10px;

   &:after {
    display: block;
    content: "";
    width: 140px;
    height: 2px;
    background: #0d4fa5;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 4px;
   }

   i {
    color: #002445;
    font-size: 20px;
    cursor: pointer;
    margin-left: 12px;
   }
  }

  .goLink {
   color: #002445;
   font-size: 16px;
   cursor: pointer;
   transition: .3s;

   i {
    color: #002445;
    font-size: 20px;
    position: relative;
    top: 2px;
    margin-left: 10px;
   }

   &:hover {
    transform: scale(1.3);
   }
  }
 }

 .box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 1%;
 }

 .itemBox {
  display: flex;
  margin-top: 30px;
  padding-bottom: 30px;
  flex-direction: column;
  border-bottom: 1px solid #ddd;

  h1 {
   color: #002445;
   font-size: 16px;

   span {
    font-size: 30px;
    font-weight: bold;
   }
  }
  p {
   color: #a1a5b3;
   font-size: 14px;
  }
 }

 .table {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .el-table {
   margin-top: 30px;
   flex: auto;

   &:before {
    background-color: transparent;
   }

   .icon {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #000;

    img {
     width: 30px;
     margin-right: 10px;
    }
   }

   /deep/ th.is-leaf {
    border-bottom: none;
    padding: 0;
   }
   /deep/ td {
    padding: 23px 0;
   }
  }
 }
}
</style>
